<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui, maximum-scale=1, user-scalable=no" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <style>*{margin:0;}</style>
</head>
<body style="margin:0">
    <p id="p_for_log"></p>
    <script>

    /**
        函数：水平滑动然后干点儿什么
        horizontal_and_do({
            left_and_do: function(){},
            right_and_do: function(){}
        });
    **/

    function horizontal_and_do(){
        var cursor_change;
        var toucharea = document.body;
        var callback = arguments[0];

        //为了方便测试添加的代码
        toucharea.style['min-height'] = document.documentElement.clientHeight+'px';

        toucharea.addEventListener('touchstart',function(event){
            log('---- touchstart ----');
            cursor_change = null;

            var start_pos = {
                x: event.targetTouches[0].clientX,
                y: event.targetTouches[0].clientY
            };

            toucharea.addEventListener('touchmove',function(event){
                toucharea.onMove = arguments.callee;

                cursor_change = {
                    x: event.targetTouches[0].clientX - start_pos.x,
                    y: event.targetTouches[0].clientY - start_pos.y,
                    w: document.documentElement.clientWidth
                };

                //尼玛，touchend 还真给手机浏览器『吃』掉了，我晕死，本来下面这些东西应该放在 touchend 处理的

                //这时候，检测 cursor_change 的数据，如果 是横向滑动 buang~ 加特技~
                if( Math.abs(cursor_change.x) > 10 && Math.abs(cursor_change.x/cursor_change.y) > 5){

                    if( cursor_change.x>0 ){
                        log(' -> ');
                        callback['right_and_do']();
                    }else{
                        log(' <- ');
                        callback['left_and_do']();
                    }

                    event.cancelBubble = true;
                    event.preventDefault();
                }

            });

            toucharea.addEventListener('touchend',function(){
                log('---- touchend ----');
                toucharea.removeEventListener('touchmove',toucharea.onMove);
                toucharea.removeEventListener('touchend',arguments.callee);
            });
        });
    };

    horizontal_and_do({
        left_and_do: function(){
            document.body.style['background-color'] = 'red';
        },
        right_and_do:function(){
            document.body.style['background-color'] = 'blue';
        }
    });

    function log(msg){
        p_for_log.innerHTML = JSON.stringify(msg);
        console.log(msg);
    }
    </script>
</body>
</html>